<template>
  <div class="dashboard-container">
    <el-row>
      <el-col :span="24" class="sy">
        <el-image
          class="sy_img"
          :src="userData.img"
          :fit="fit"></el-image>
        <el-descriptions title="用户信息" style="font-size: 1.2em">
          <el-descriptions-item label="用户名">{{ userData.username }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{userData.phone}}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{userData.email}}</el-descriptions-item>
          <el-descriptions-item label="所在学校">
            <el-tag size="small">{{ userData.school }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="职位" v-if="userData.roleId == 1">学生</el-descriptions-item>
          <el-descriptions-item label="职位" v-if="userData.roleId == 2">教师</el-descriptions-item>
          <el-descriptions-item label="职位" v-if="userData.roleId == 3">助教</el-descriptions-item>
          <el-descriptions-item label="职位" v-if="userData.roleId == 4">管理员</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'
import request from '@/utils/request'
// import request from "@/utils/request";

export default {
  name: 'Dashboard',
  data() {
    return {
      mktext: 'test',
      size: '',
      fit: 'cover',
      userData: {
        username: '测试用户',
        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Faf04d4ae-e9b4-4ed1-a2cf-d477d4577538%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1700992529&t=9367af432f09f8f0734c4f2dfe67eb9b',
        phone: '测试手机号',
        email: '测试邮箱',
        school: '测试学校',
        roleId: 1
      }
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
    this.getUserData()
    this.getMdText()
  },
  methods: {
    getUserData() {
      var userId = localStorage.getItem('userId')
      request.get('/userData/' + userId).then((res) => {
        this.userData = res.data
      })
    },
    // getMdText() {
    //   const _this = this
    //   Axios.get('./help/readMe.md').then(res => {
    //     if (res.status === 200) {
    //       _this.mktext = res.data
    //     }
    //   })
    // },
    createXhr() {
      try {
        return new XMLHttpRequest()
      } catch (e) {
        console.log(e)
      }
      // try {
      //   return new ActiveXObject('Microsoft.XMLHTTP')
      // } catch (e) {
      //   console.log(e)
      // }
      // alert("Ajax对象由于浏览器罕用而创建失败");
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/defines.scss';
.dashboard {
  &-container {
    padding: 30px;
    width: 100%;
    height: 100%;
    background-color: $--my-background-color1;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.sy{
  text-align: center;
  background-color: #ffffff;
  padding: 5% 10%;
  margin-top: 2%;
  height: 500px;
}
.sy_img{
  height: 130px;
  width: 130px;
  border-radius: 50%;
}
.el-descriptions :not(.is-bordered){
  padding-bottom: 20px !important;
}
.el-descriptions__title{
  font-size: 2em !important;
}
</style>
